<!--
 * @Descripttion: 
 * @Author: Wang Dejiang(aei)
 * @Date: 2022-04-24 13:51:35
 * @LastEditors: Wang Dejiang(aei)
 * @LastEditTime: 2022-04-26 11:38:15
-->
<template>
  <el-scrollbar>
    <div class="directoryContent">
      <el-menu
        :default-active="apiIndex"
        mode="vertical"
        class="el-menu-vertical-demo"
        text-color="#464646"
        active-text-color="#ffd04b"
        style="border-bottom: 0; height: 48px"
        @select="handleSelect"
        :ellipsis="false"
      >
        <el-menu-item
          v-for="item in props.list"
          :key="item.path"
          :index="item.path"
          :id="item.path"
        >
          <span style="padding-left: 20px; font-size: 18px; font-weight: 600">{{
            item.name
          }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../../pinia/store'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
interface Props {
  list: {
    path: string
    name: string
  }[]
}
const props = withDefaults(defineProps<Props>(), {
  list: () => [
    {
      path: '',
      name: '',
    },
  ],
})
const apiIndex = storeToRefs(useStore()).apiIndex
const handleSelect = (key: string, keyPath: string[]) => {
  router.push({
    hash: '#' + key,
  })
}
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
